<template>
	<view class="personal-info-page">
		<view class="up-view">
			<view class="custom-navbar">
				<!-- 				<view class="nav-left" @click="goBack">
					<global-arrow direction="left" :size="29" color="#fff"></global-arrow>
				</view>
				<view class="nav-title">
					<text>信息修改</text>
				</view>
				<view class="nav-right">
				</view> -->
			</view>
		</view>

		<!-- 信息列表 -->
		<view class="info-list">
			<view class="cardUp">
				<text class="evaluation-title">服务评价</text>
				<view class="store-info">
					<image class="store-img" src="/static/images/4.png" mode="widthFix"></image>
					<view class="store-detail">
						<text class="store-name">车百事汽车生活馆</text>
						<view class="star-rating">
							<uni-rate :max="5" :value="5" allow-half margin="4" size="18"/>
						</view>
					</view>
				</view>
			</view>
			<view class="cardUp">
				<view class="commentTitle">
					<text class="comment-label">评语</text>
					<text class="little"> (0-299字)</text>
				</view>
				<textarea class="comment-input" placeholder="请留下您宝贵的意见和建议......" maxlength="299"
					v-model="commentContent"></textarea>
			</view>
			<view class="cardUp">
				<view class="photoTitle">
					<text class="photo-label">照片</text>
					<text class="little"> (选填)</text>
				</view>
				
				<view class="upload-btn" @click="chooseImage">
					<uni-icons type="plusempty" color="#bebebe" size="20"></uni-icons>
					<text class="upload-text">上传图片</text>
				</view>
				<view class="preview-imgs" v-if="previewImages.length > 0">
					<image v-for="(img, index) in previewImages" :key="index" :src="img" class="preview-img"
						mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<button class="submit-btn" @click="submitEvaluation">提交</button>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				commentContent: '', // 评语内容
				previewImages: [] // 已选择的图片
			};
		},
		methods: {
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 5, // 最多选择1张图片
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.previewImages = res.tempFilePaths;
						// 若需要上传到服务器，可在此调用上传接口
						// uni.uploadFile({
						//   url: '你的上传接口地址',
						//   filePath: res.tempFilePaths[0],
						//   name: 'file',
						//   success: (uploadRes) => {
						//     console.log('上传成功', uploadRes);
						//   }
						// });
					}
				});
			},
			// 提交评价
			submitEvaluation() {
				if (!this.commentContent.trim() && this.previewImages.length === 0) {
					uni.showToast({
						title: '请输入评语或上传图片',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '提交中...'
				});
				// 模拟提交接口请求
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});
					setTimeout(() => {
						this.goBack();
					}, 1500);
				}, 1000);
			}
		}
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 250rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		/* background-image: url('/static/icons/组 8.png'); */
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 10rpx;
		font-weight: 300;
		box-sizing: border-box;
	}

	.nav-title {
		margin-right: 17rpx;
	}

	.personal-info-page {
		background-color: #f5f5f5;
		height: 100vh;
	}


	.info-list {
		margin-top: 20rpx;
		border-radius: 100rpx;
		padding: 20rpx;
		margin-top: -260rpx;
	}

	.cardUp {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 40rpx;
		margin-bottom: 20rpx;
	}



	.evaluation-title {
		font-size: 30rpx;
		font-weight: bold;
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid #F8F8F8;
		color: #333;
	}

	.store-info {
		margin-top: 26rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
	}

	.store-img {
		width: 160rpx;
		border-radius: 8rpx;
		margin-right: 40rpx;
	}

	.store-detail {
		flex: 1;
	}

	.store-name {
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.star-rating {
		display: flex;
		margin-top: 10rpx;
	}

	/* 评语区域 */
	.comment-area {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	.commentTitle,.photoTitle{
		margin-bottom: 20rpx;
	}
	.comment-label,.photo-label {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.little{
		font-size: 20rpx;
	}

	.comment-input {
		width: 100%;
		min-height: 150rpx;
		border: 1rpx solid #eee;
		text-indent: 20rpx;
		border-radius: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 10rpx;
	}

	/* 照片上传区域 */
	.photo-area {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}


	.upload-btn {
		width: 120rpx;
		height: 120rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-text {
		font-size: 24rpx;
		margin-top: 8rpx;
		color: #bebebe;
	}

	.preview-imgs {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.preview-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	/* 提交按钮 */
	.submit-btn {
		background-color: #0362E6;
		color: #fff;
		border-radius: 50rpx;
		padding: 0rpx 0;
		font-size: 24rpx;
		margin: 20rpx 130rpx;
	}
</style>